<template>
  <md-nav-bar :title="data.title" />
  <div class="container">
    <!-- 记录按钮 -->
    <view class="record-btn" v-if="data.type === 'raffle_ticket'" @click="handleRecord">
      <text class="record-text">抽奖记录</text>
    </view>
    <view class="record-btn" v-if="data.type === 'prize_ticket'" @click="handleRecord">
      <text class="record-text">核销记录</text>
    </view>
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true">
      <view class="coupon-wrap" v-for="item in data.list" :key="item.id" @click="() => handleDetail(item)">
        <view class="text" v-if="data?.type === 'raffle_ticket'">{{ item.coupon_code }}</view>
        <image class="coupon-image" :src="item.bg_img" mode="aspectFill" />
      </view>
    </mescroll-body>
    <uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.9)">
      <view class="pop_content flex-c">
        <ikun-qrcode width="390" height="390" unit="rpx" color="#000000" :data="data.codeUrl" />
      </view>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
// 接口
import { goodsTicket, raffleTicket, signUpTicket } from '@/api';

const data = reactive<any>({
  title: '', // 页面标题
  type: '',
  list: [],
  canReset: false,
  codeUrl: '', // 二维码内容
});
const popup = ref(null);

const handleRecord = () => {
  uni.navigateTo({ url: '/pages/other/coupon/record?type=' + data.type });
};

const handleDetail = async (item: any) => {
  // 奖品券
  if (data.type === 'prize_ticket') {
    // 线上券
    if (item?.goods_type == 1) {
      // uni.navigateTo({ url: '/pages/other/coupon/shop?id=' + item?.id });
    } else {
      // 线下券
      // 弹出二维码的形式核销
      data.codeUrl = `/pages/other/scanCode/coupon?code=${item?.coupon_code || ''}&id=${item.id}`;
      popup.value?.open?.();
    }
  } else if (data.type === 'raffle_ticket') {
    // 抽奖券
    uni.navigateTo({ url: '/pages/other/coupon/lottery-draw?id=' + item?.id });
  }
};

/**
 * 接口相关
 */

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res: any;
    let pageInfo = { page: mescroll.num, limit: mescroll.size };
    if (data?.type === 'raffle_ticket') {
      // 抽奖券
      res = await raffleTicket({ ...pageInfo });
    } else if (data?.type === 'prize_ticket') {
      // 奖品券
      res = await goodsTicket({ ...pageInfo });
    } else {
      // 报名券
      res = await signUpTicket({ ...pageInfo });
    }
    const curPageData = res?.data?.data || []; // 当前页数据
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.total);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

onLoad(option => {
  data.title = option?.title;
  data.type = option?.type;
});

onShow(() => {
  data.canReset && getMescroll().resetUpScroll(); // 重置列表数据为第一页
  data.canReset && getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
  data.canReset = true; // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  .record-btn {
    width: 100%;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .record-text {
      font-size: 32rpx;
      font-weight: 600;
      color: $warn;
      transition: all 0.2s ease;
      &:active {
        opacity: 0.7;
        transform: scale(0.98);
      }
    }
  }
  .coupon-wrap {
    position: relative;
    width: 100%;
    height: 270rpx;
    margin-bottom: 20rpx;
    background: $lineColor;
    .coupon-image {
      width: 100%;
      height: 270rpx;
    }
    .text {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      font-weight: bold;
      font-size: 28rpx;
      z-index: 1;
    }
  }
}
</style>
